<template>
  <div class="skill_index">
    <IndexNav></IndexNav>
    <div id="skill" :class="['index_main','color-'+$store.state.color]">
      <IndexMenu v-on:getType="getSkillByType"></IndexMenu>
      <IndexDetail ref="detail" :type="skillType"></IndexDetail>
<!--      <IndexStatis></IndexStatis>-->
    </div>
  </div>
</template>

<script>
import IndexDetail from "../../components/skill/index/index_detail.vue";
import IndexMenu from "../../components/skill/index/index_menu.vue";
import IndexNav from "../../components/skill/index/index_nav.vue";
import IndexStatis from "../../components/skill/index/index_statis.vue";

export default {
  name: "index",
  data() {
    return {
      skillType: "",
    }
  },
  components:{
    IndexDetail,IndexMenu,IndexNav,IndexStatis
  },
  mounted: function() {
    this.$refs.detail.getSkills({
      type: '',
      name: ''
    });
  },
  methods: {
    getSkillByType:function(skillType) {
      this.skillType = skillType;
    }
  }
}
</script>

<style lang="scss" scoped>
.skill_index {
  width: 100%;
  height: 100%;
  .index_main{
    //background-color: #000;
    display: flex;
    height: 100%;
  }
  .color-1{
    background: radial-gradient(circle at 50% 150%,hotpink, darkblue);
  }
  .color-2 {
    background: linear-gradient(slateblue, cornflowerblue);
  }
  .color-3{
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; background-blend-mode: multiply,multiply;
  }
  .color-4 {
    background: url('../../assets/images/background.jpg') no-repeat center / cover ;
  }
}
</style>
